<template>
    <lay-row space="20">
      <lay-col md="24">
        <lay-table
          height="500px"
          ref="tableRef3"
          :columns="columns"
          :data-source="dataSource"
          :default-toolbar="true"
          v-model:selectedKeys="selectedKeys"
        >
        <template #toolbar>
          <lay-button size="sm" @click="deleteRecord">删除</lay-button>
          <lay-input size="sm" v-model="params.user" style="width: 50%;margin-left: 20px;margin-top: 10px">
            <template #prepend>{{ page === 'file' ? '用户':'日期' }}</template>
          </lay-input>
          <lay-button type="normal" size="sm" @click="queryFiles" style="margin-left: 10px">查询</lay-button>
        </template>
        <template v-slot:filepath="{ row }">
          <a :href="row.url">{{row.filename}}</a>
        </template>
        <template v-slot:operator="{ row }">
          <lay-button size="xs" type="normal" @click="downLoadData(row)">下载</lay-button>
        </template>
      </lay-table>
      </lay-col>
      <lay-col md="12"></lay-col>
    </lay-row>
</template>

<script lang="ts">
export default {
    name: "QueryRecord"
}
</script>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {notify} from "../../../untils/tip";
import {deleteFilename, downExcelFile, queryRecord} from "../../../api/fastApi/fastApi";

const {page, date} = defineProps({
  page: {type: String, default: 'file'},
  date: {type: String, default: ''}
});

onMounted(()=>{
  if(page === 'tables' && date !== ''){params.user = date;}
  queryFiles();
})

const tableRef3 = ref();
const params = reactive({
    user: '',
    page: page
})
const selectedKeys: any = ref([])

const deleteRecord = () => {
    console.log("checked data : ", selectedKeys.value);
    dataSource.value.forEach( async (unit: any) => {
        if(unit.id in selectedKeys.value){
            await deleteFilename({filename: unit.url});
        }
    })
    queryFiles();
}

const columns = [
  { fixed: "left", type: "checkbox", title: "复选"},
  { title: page === "file"? "用户":"日期", width:"25%", key:"username"},
  { title:"文件名", width:"50%", key:"filename"},
  { title:"操作", width: "20%", key:"operator", customSlot:"operator" }
]

const dataSource = ref([
  {id:"1", username:"lijk34925", filename: '202.sql', url: './static/lijk34925/202.sql'},
 ])

const queryFiles = async () => {
    let response = await queryRecord(params);
    if(response.status === 200){
        dataSource.value = response.result;
    }else {
      notify("failed", response.message)
    }
}

const downLoadData = async (unit: any) => {
  const filename = unit.filename;
  try {
    const response = await downExcelFile(unit);
    const url = window.URL.createObjectURL(new Blob([response]));
    const link = document.createElement('a');
    link.href = url;

    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
    notify('success', filename + '文件下载成功！')
  } catch (error) {
    console.error(error);
    notify('failed', filename + '文件下载失败！')
  }
}

</script>

<style scoped>

</style>